
<template>
  <div v-if="dialogVisible">
    <el-dialog
    v-model="showDialog"
    :title="props.dialogTitle"
    :width="props.dialogWidth"
    :before-close="handleClose"
  >
   <div class="dialog-content">
    <slot></slot>
   </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="chancelDialog">{{ props.chancelText }}</el-button>
        <el-button type="primary" @click="saveDialog">
        {{ props.confirmText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  isShow:{
    type:Boolean,
    default:false

  },
  dialogTitle:{
    type:String,
    default:'新增'
  },
  dialogWidth:{
    type:[String,Number],
    default:'40%'
  },
  chancelText:{
    type:String,
    default:'取消'
  },
  confirmText:{
    type:String,
    default:'确定'
  }
})
const emit = defineEmits(['close','save'])
const dialogVisible = computed(()=>props.isShow)
const showDialog = ref(true)
const handleClose = ()=>{
  emit('close',false)

}
const chancelDialog = ()=>{
  handleClose()
}
const saveDialog = ()=>{
  emit('save')
  emit('close',false)
}
</script>


<style>

</style>
